<script setup>
import { ref, watch, watchEffect } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'warn'
  },
  title: {
    type: String,
    default: '提示'
  },
  message: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['change','update:modelValue'])

const dialogRef = ref()

watch(()=>props.modelValue,(show)=>{
  if( !dialogRef.value){
    return
  }
  dialogRef.value[show ? 'open' : 'close']()
},{immediate:true})

const onPopupEvent = function(e) {
  emits('change',e)
  emits('update:modelValue',false)
}

</script>

<template>
  <uni-popup ref="dialogRef" type="dialog">
    <uni-popup-dialog
      :type="type"
      :title="title"
      :content="message"
      confirm-text="确定"
      cancel-text="取消"
      @close="onPopupEvent(0)"
      @confirm="onPopupEvent(1)"
    >
    </uni-popup-dialog>
  </uni-popup>
</template>

<style scoped lang="scss">

</style>
